<template>
  <div class='meeting-home-wrapper'
    v-show='showPage'
    @touchmove='handleTouchmove'>
    <div class="cont"
      :class="{hasFooter:(meetingStatus === 1 && (settingInfo.openApply || (settingInfo.openSign && settingInfo.signStartTime && settingInfo.signEnable))) || (meetingStatus === 2 && ((settingInfo.openApply&&!settingInfo.openSign) || (settingInfo.openSign && !settingInfo.signStartTime) || (settingInfo.openSign && settingInfo.signStartTime && settingInfo.signEnable))) || meetingStatus === 3 || settingInfo.openLike || settingInfo.openCollect}">
      <!-- 头部封面图 -->
      <div class='meeting-cover'
        :style='{ backgroundImage: `url(${meetingInfo.coverImg})` }'>
      </div>
      <!-- 会议详情 -->
      <section class='meeting-info'>
        <!-- 基本信息 -->
        <section class='body-part'
          v-if="(meetingInfo.organizations && meetingInfo.organizations.length) || meetingInfo.meetingName || meetingInfo.applyNum">
          <!-- 会议标题及报名情况 -->
          <div class='basic-title'>
            <div class='title-box'>{{meetingInfo.meetingName}}</div>
            <div class='title-signUp'>{{meetingInfo.applyNum || 0}}人已报名</div>
          </div>
          <ul class='basic-list'>
            <!-- 当会议组织只有一个时 -->
            <li class='basic-item'
              v-if="meetingInfo.organizations && meetingInfo.organizations.length == 1">
              <span class='item-icon speaker'></span>
              <span class='item-text'>{{meetingInfo.organizations[0].organizer}}</span>
            </li>
            <!-- 当会会议组织有多个时 -->
            <li class='basic-item'
              v-if="meetingInfo.organizations && meetingInfo.organizations.length > 1">
              <span class='item-icon speaker'></span>
              <div class="period">
                <p class="text"
                  v-for="(info, i) in meetingInfo.organizations"
                  :key="`speaker${i}`">{{info.organizer}}</p>
              </div>
            </li>
            <!-- 当会议只在当天时进行时，显示当天的时间段 -->
            <li class='basic-item'
              v-if="isSameDay">
              <span class='item-icon time'></span>
              <span class='item-text time'>{{meetingTimeSameDay}}</span>
            </li>
            <!-- 当会议是跨天的，无议程或议程为1个时，显示会议开始结束时间 -->
            <li class='basic-item'
              v-if="!isSameDay && meetingInfo.agenda && meetingInfo.agenda.length <= 1 && meetingInfo.meetingStartTime && meetingInfo.meetingStopTime">
              <span class='item-icon time'></span>
              <div class="period">
                <p class="text">{{noneOrSingleAgenda[0]}}</p>
                <p class="text">{{noneOrSingleAgenda[1]}}</p>
              </div>
            </li>
            <!-- 当会议是跨天的，有议程时，显示第一个议程的时间段和最后一个议程的时间段（考虑议程跨天） -->
            <li class='basic-item'
              v-if="!isSameDay && meetingInfo.agenda && meetingInfo.agenda.length > 1">
              <span class='item-icon time'></span>
              <div class="period">
                <p class="text">{{multipleAgendaStart}}</p>
                <p class="text">{{multipleAgendaEnd}}</p>
              </div>
            </li>
            <!-- 如果设置了会议场所，则显示会议场所 -->
            <!-- 如果没有设置会议场所，则显示会议地址 -->
            <!-- 如果没有设置会议场所和会议地址，则不显示 -->
            <li class='basic-item' v-if='meetingInfo.meettingPlace || meetingInfo.address'>
              <span class='item-icon address'></span>
              <span class='item-text' v-if='meetingInfo.meettingPlace'>{{meetingInfo.meettingPlace}}</span>
              <span class='item-text' v-else>
                {{meetingInfo.address || ''}}
              </span>
            </li>
          </ul>
        </section>
        <!-- 嘉宾介绍 -->
        <section class='body-part'
          v-if="meetingInfo.guests && meetingInfo.guests.length">
          <div class='part-title'>
            <span class='title-content'>嘉宾介绍</span>
            <span class='title-arrow'
                :class='{collapse: hideGuest}'
                @click='toggleHideGuest'></span>
          </div>
          <ul class='guest-list' v-show='!hideGuest'>
            <li class='guest-item'
                v-for='(guest, index) of meetingInfo.guests'
                :key='"guest" + index'>
              <div class='guest-detail'>
                <div class='detail-avatar'
                    :style='{backgroundImage: `url(${guest.guestImg})`}'>
                </div>
                <div class='detail-info'>
                  <div class='info-name'>{{guest.name}}</div>
                  <div class='info-title'>{{guest.honors}}</div>
                </div>
              </div>
              <div class='guest-desc'>{{guest.introduce}}</div>
            </li>
          </ul>
        </section>
        <!-- 会议议程 -->
        <section class='body-part'
          v-if="meetingInfo.agenda && meetingInfo.agenda.length">
          <div class='part-title'>
            <span class='title-content'>会议议程</span>
            <span class='title-arrow'
                :class='{collapse: hideProcess}'
                @click='toggleHideProcess'></span>
          </div>
          <ul class='process-list' v-show='!hideProcess'>
            <li class='process-item'
                v-for='(process, index) of meetingInfo.agenda'
                :key='"process" + index'>
              <span class='item-icon'></span>
              <div class="info-item"
                v-show="process.agendaTime || (process.agendaStartTime && process.agendaStopTime)">
                <!-- 要考虑议程是否跨天 -->
                <div class='item-title'>{{handleAgendaTime(process)}}</div>
                <div class='item-content'
                  style="font-size:15px;font-weight: 700;color:#189fff;">{{process.agendaDesc}}</div>
              </div>
              <!-- <div class="info-item"
                v-show="process.agendaDesc">
                <div class='item-title'>议程描述</div>
                <div class='item-content'>{{process.agendaDesc}}</div>
              </div> -->
              <div class="info-item"
                v-show="process.agendaDetail">
                <div class='item-title'>议程详情</div>
                <div class='item-content'
                  style="letter-spacing:2px; padding-left:6px;">{{process.agendaDetail}}</div>
              </div>
            </li>
          </ul>
        </section>
      </section>
    </div>
    <!-- 悬浮按钮 -->
    <div class="float-btn">
      <!-- 会议中心：通过后台个人中心的开关控制 -->
      <div class="btn-info"
        v-show="settingInfo.openUserCenter"
        @click="onJump('meetingPersonCenter')">
        <p class="btn-icon center"></p>
        <p class="btn-label">会议中心</p>
      </div>
      <!-- 投票调研显示情况：问卷只要和会议关联就会在移动端显示，和会议状态以及上墙时间无关 -->
      <div class="btn-info"
        v-show='settingInfo.surveyCount'
        @click="onJump('voteSurveyList')">
        <p class="btn-icon survey"></p>
        <p class="btn-label">投票调研</p>
        <!-- 角标代表可参与的问卷数 -->
        <!-- <p class="num"
          v-show="settingInfo.canBeAnswerCount">{{settingInfo.canBeAnswerCount}}</p> -->
        <!-- 角标代表未参与过的问卷数 -->
        <p class="num"
          v-show="settingInfo.canBeAnswerCount">{{settingInfo.canBeAnswerCount}}</p>
      </div>
      <!-- 我的提问显示情况：后台开启我的提问就显示 -->
      <div class="btn-info"
        v-show='settingInfo.openMobileQa'
        @click="onJump('questionList')">
        <p class="btn-icon qa"></p>
        <p class="btn-label">我的提问</p>
      </div>
    </div>
    <!-- 底部按钮 -->
    <!-- 显示按钮的情况：
            1、未开始，开启报名
            2、进行中，开启报名或开启签到
            3、已结束
            4、显示点赞
            5、显示收藏
            6、显示评论-->
    <section class='home-footer'
      v-if="(meetingStatus === 1 && (settingInfo.openApply || (settingInfo.openSign && settingInfo.signStartTime && settingInfo.signEnable))) || (meetingStatus === 2 && ((settingInfo.openApply&&!settingInfo.openSign) || (settingInfo.openSign && !settingInfo.signStartTime) || (settingInfo.openSign && settingInfo.signStartTime && settingInfo.signEnable))) || meetingStatus === 3 || settingInfo.openLike || settingInfo.openCollect || ((meetingInfo.meetingType === 1 && meetingStatus === 2))">
      <ul class="toolbar-list"
        :class="{'all': !((meetingStatus === 1 && (settingInfo.openApply || (settingInfo.openSign && settingInfo.signStartTime && settingInfo.signEnable)))|| (meetingStatus === 2 && ((settingInfo.openApply&&!settingInfo.openSign) || (settingInfo.openSign && !settingInfo.signStartTime) || (settingInfo.openSign && settingInfo.signStartTime && settingInfo.signEnable))) || meetingStatus === 3 || ((meetingInfo.meetingType === 1 && meetingStatus === 2)))}">
        <li class="toolbar-item"
          :class="{active: meetingInfo.isLike}"
          v-show="settingInfo.openLike"
          @click="handleLick(meetingInfo.isLike)">
          <p class="icon icon-like"></p>
          <p class="text">{{meetingInfo.likeNum || 0}}</p>
        </li>
        <li class="toolbar-item"
          :class="{active: meetingInfo.isCollect}"
          v-show="settingInfo.openCollect"
          @click="handleCollect(meetingInfo.isCollect)">
          <p class="icon icon-collect"></p>
          <p class="text">{{meetingInfo.collectNum || 0}}</p>
        </li>
        <!-- <li class="toolbar-item"
          v-show="settingInfo.openComment"
          @click="onJump('commentList')">
          <p class="icon icon-comment"></p>
          <p class="text">评论</p>
        </li> -->
      </ul>
      <!-- 会议未开始、开启报名且未报名 -->
      <div class='footer-btn active'
        :class='{ml12: settingInfo.openLike || settingInfo.openCollect}'
        v-show='meetingStatus === 1 && settingInfo.openApply && !meetingInfo.isApply'
        @click='startApply()'>立即报名</div>
      <!-- 说明：
              1、会议未开始开启报名且已报名
              2、会议进行中开启报名且已报名且未签到
      -->
      <div class='footer-btn'
        :class='{ml12: settingInfo.openLike || settingInfo.openCollect}'
        v-show='(meetingStatus === 1 && settingInfo.openApply && meetingInfo.isApply) || (meetingStatus === 2 && settingInfo.openApply && meetingInfo.isApply && !settingInfo.openSign)'>已报名</div>
      <!-- 说明：
          修改前逻辑：会议进行中、开启签到且未签到
          修改后逻辑：
            1、如果未设置签到开始时间，开启签到且会议进行中且未签到显示“立即签到”
            2、如果设置了签到开始时间，开启签到且当前时间大于等于签到时间且会议未结束且未签到显示"立即签到"
      -->
      <div class='footer-btn active'
        :class="{ml12:settingInfo.openLike || settingInfo.openCollect || (meetingStatus === 1 && settingInfo.openApply && settingInfo.openSign && settingInfo.signStartTime && settingInfo.signEnable)}"
        v-show='isShowSignBtn'
        @click="saveSign()">立即签到</div>
      <!-- 说明:
          修改前逻辑：会议进行中、开启签到且已签到
          修改后逻辑：
            1、如果未设置签到开始时间，开启签到且会议进行中且已签到显示“已签到”
            2、如果设置了签到开始时间，开启签到且当前时间大于等于签到时间且会议未结束且已签到显示"已签到"
      -->
      <div class='footer-btn'
        :class="{ml12: settingInfo.openLike || settingInfo.openCollect || (meetingStatus === 1 && settingInfo.openApply && settingInfo.openSign && settingInfo.signStartTime && settingInfo.signEnable)}"
        v-show='isShowSignedBtn'>已签到</div>
      <!-- 会议进行中，开启报名未开启签到且未报名 -->
      <div class='footer-btn ml12'
        v-show="meetingStatus === 2 && settingInfo.openApply && !settingInfo.openSign && !meetingInfo.isApply">报名已结束</div>
      <!-- 线上会议且会议进行中(显示“立即签到”、“已签到”、“报名结束”时，要加按钮间距) -->
      <div class='footer-btn active'
        :class="{ml12: settingInfo.openLike || settingInfo.openCollect || (meetingInfo.meetingType === 1 && meetingStatus === 2 && (isShowSignBtn || isShowSignedBtn || (settingInfo.openApply && !settingInfo.openSign))) }"
        v-show="meetingInfo.meetingType === 1 && meetingStatus === 2"
        @click="goToPlay()">进入会议</div>
       <!-- 会议已结束 -->
      <div class='footer-btn'
        v-show="meetingStatus === 3">会议已结束</div>
    </section>
    <!-- 报名须知 -->
    <section class='signUp-wrapper'
             v-if='isSigningUp'
             @touchmove.stop='handleTouchmove'>
      <div class='siguUp-box'>
        <div class='box-header'>
          报名须知
          <span class='box-close' @click='cancelSignUp'></span>
        </div>
        <div class='box-content editor-content'
          @touchmove.stop='moveContent'
          v-html="settingInfo.applyTerms">
        </div>
        <div class='box-footer'>
          <div class='footer-toggle'>
            <span class='toggle-icon'
                 :class='{agreed: isAgreed}'
                 @click='toggleAgree()'>
            </span>
            <span class='toggle-text'
              @click='toggleAgree()'>已阅读协议</span>
          </div>
          <div class='footer-btn'
            @click="confirmSignUp()">立即报名</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      meetingId: this.$route.query.meetingId || '',
      meetingInfo: {
        meetingName: '',
        meetingType: '',
        coverImg: '',
        applyNum: 0,
        meetingStartTime: '',
        meetingStopTime: '',
        meetingTime: '',
        province: '',
        city: '',
        district: '',
        address: '',
        guests: [],
        agenda: [],
        meetingNotice: '',
        isLike: false,
        likeNum: 0,
        isCollect: false,
        collectNum: 0,
        isApply: false,
        isSign: false
      },
      /**
       * 会议状态
       * 1 代表未开始
       * 2 代表进行中
       * 3 代表已结束
       */
      meetingStatus: null,
      // 会议配置
      settingInfo: {
        applyTerms: '',
        openApply: false,
        openSign: false,
        signType: 1,
        openCollect: false,
        openComment: false,
        openLike: false,
        openUserCenter: false,
        openMobileQa: false
      },
      // 展开折叠嘉宾、议程
      hideGuest: false,
      hideProcess: false,
      isAgreed: false,
      isSigningUp: false,
      isLoading: false,
      // 会议开始结束时间是否是同一天
      isSameDay: null,
      showPage: false
    }
  },
  computed: {
    // 是否展示【立即签到】按钮
    isShowSignBtn () {
      // 展示【立即签到】按钮条件
      // 1. 会议进行中，开启了签到，没有设置签到时间
      // 2. 会议未结束，开启了签到，设置了签到时间且签到时间已到
      // 3. 在满足以上两点的前提下，如果开启多次签到，则始终显示, 如果没有开启多次签到，则用户未签到时展示
      if ((this.meetingStatus === 2 && !this.settingInfo.signStartTime && this.settingInfo.openSign) ||
          (this.meetingStatus < 3 && this.settingInfo.signStartTime && this.settingInfo.signEnable && this.settingInfo.openSign)
      ) {
        if (this.settingInfo.signType === 2) {
          return true
        } else if (!this.meetingInfo.isSign) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    // 是否显示【已签到】按钮
    isShowSignedBtn () {
      // 如果没有设置多次签到
      if (this.settingInfo.signType !== 2) {
        // 展示【已签到】按钮条件：
        // 1. 会议进行中，开启了签到，没有设置签到时间且用户已经签到
        // 2. 会议未结束，开启了签到，设置了签到时间且签到时间已到，用户已经签到
        if ((!this.settingInfo.signStartTime && this.settingInfo.openSign && this.meetingStatus === 2 && this.meetingInfo.isSign) ||
            (this.settingInfo.signStartTime && this.settingInfo.signEnable && this.settingInfo.openSign && this.meetingStatus < 3 && this.meetingInfo.isSign)
        ) {
          return true
        } else {
          return false
        }
      // 如果设置了多次签到，则始终不展示【已签到】按钮
      } else {
        return false
      }
    },
    // 当会议只在当天时进行时，显示当天的时间段
    meetingTimeSameDay () {
      let timeArr = this.formatDate(this.meetingInfo.meetingStartTime, this.meetingInfo.meetingStopTime)
      return timeArr[0]
    },
    // 当会议是跨天的，无议程或议程为1个时，显示会议开始结束时间
    noneOrSingleAgenda () {
      let timeArr = this.formatDate(this.meetingInfo.meetingStartTime, this.meetingInfo.meetingStopTime)
      return timeArr
    },
    // 当会议是跨天的，有议程时，显示第一个议程的时间段和最后一个议程的时间段（考虑议程跨天）(考虑议程跨天)
    // 多议程第一个议程时间
    multipleAgendaStart () {
      let timeArr = this.formatDate(this.meetingInfo.agenda[0].agendaStartTime, this.meetingInfo.agenda[0].agendaStopTime)
      if (timeArr.length > 1) {
        return `${timeArr[0]} ~ ${timeArr[1]}`
      } else {
        return timeArr[0]
      }
    },
    // 多议程最后议程的时间
    multipleAgendaEnd () {
      let timeArr = this.formatDate(this.meetingInfo.agenda[this.meetingInfo.agenda.length - 1].agendaStartTime, this.meetingInfo.agenda[this.meetingInfo.agenda.length - 1].agendaStopTime)
      if (timeArr.length > 1) {
        return `${timeArr[0]} ~ ${timeArr[1]}`
      } else {
        return timeArr[0]
      }
    }
  },
  methods: {
    // 获取会议信息
    fetchMeetingInfo () {
      this.$_load.show()
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/detail/${this.meetingId}/${sessionStorage.getItem('userId')}`
      this.$get(url).then(res => {
        this.$_load.hide()
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.meetingInfo = data
            this.meetingStatus = data.eventOpen
            this.judgeSameDay()
            // 设置分享
            this.setToolMenuAndShare({
              showAllMenu: false,
              shareInfo: {
                title: data.meetingName,
                imgUrl: data.coverImg,
                desc: data.meetingName,
                link: location.href
              }
            })
          }
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 获取会议配置
    fetchMeetingSettingInfo () {
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/setting/${this.meetingId}/${sessionStorage.getItem('userId')}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.settingInfo = data
          }
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 点击报名
    startApply () {
      // this.isSigningUp = true
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/${this.meetingId}/apply/${sessionStorage.getItem('userId')}`
      this.$posts(url).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.fetchMeetingInfo()
          this.$toast({
            message: '报名成功',
            icon: require('@/assets/img/ic_success@2x.png')
          })
          this.isSigningUp = false
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 提交报名
    confirmSignUp () {
      if (!this.isAgreed) {
        return this.$toast({
          message: '请勾选已阅读协议'
        })
      }
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/${this.meetingId}/apply/${sessionStorage.getItem('userId')}`
      this.$posts(url).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.fetchMeetingInfo()
          this.$toast({
            message: '报名成功',
            icon: require('@/assets/img/ic_success@2x.png')
          })
          this.isSigningUp = false
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 提交签到
    saveSign () {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/${this.meetingId}/sign/${sessionStorage.getItem('userId')}`
      this.$posts(url).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.$toast({
            message: '签到成功',
            icon: require('@/assets/img/ic_success@2x.png')
          })
          this.fetchMeetingInfo()
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 点赞
    handleLick (isLike) {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let url = ''
      let agentId = sessionStorage.getItem('agentId')
      let userId = sessionStorage.getItem('userId')
      if (isLike) {
        url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${agentId}/${this.meetingId}/cancelLike/${userId}`
      } else {
        url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${agentId}/${this.meetingId}/like/${userId}`
      }
      this.$posts(url).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.$toast(res.message)
          this.fetchMeetingInfo()
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 收藏
    handleCollect (isCollect) {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let url = ''
      let agentId = sessionStorage.getItem('agentId')
      let userId = sessionStorage.getItem('userId')
      if (isCollect) {
        url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${agentId}/${this.meetingId}/cancelCollect/${userId}`
      } else {
        url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${agentId}/${this.meetingId}/collect/${userId}`
      }
      this.$posts(url).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.$toast(res.message)
          this.fetchMeetingInfo()
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 展开折叠嘉宾、议程
    toggleHideGuest () {
      this.hideGuest = !this.hideGuest
    },
    toggleHideProcess () {
      this.hideProcess = !this.hideProcess
    },
    onJump (routeName) {
      this.$router.push({
        name: routeName,
        query: {
          meetingId: this.meetingId,
          meetingType: this.meetingInfo.meetingType
        }
      })
    },
    // 报名须知相关
    cancelSignUp () {
      this.isSigningUp = false
      this.isAgreed = false
    },
    toggleAgree () {
      this.isAgreed = !this.isAgreed
    },
    moveContent (e) {
      // e.returnValue = true
    },
    handleTouchmove (e) {
      if (this.isSigningUp) {
        e.preventDefault()
      }
    },
    // 进入会议
    goToPlay () {
      if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        if (this.meetingInfo.pcUrl) {
          location.href = this.meetingInfo.pcUrl
        } else {
          this.$toast('暂无播放地址')
        }
      } else {
        if (this.meetingInfo.mobileUrl) {
          location.href = this.meetingInfo.mobileUrl
        } else {
          this.$toast('暂无播放地址')
        }
      }
    },
    // 判断两个日期是否为同意一天
    judgeSameDay () {
      let startTime = new Date(this.meetingInfo.meetingStartTime.replace(/-/g, '/'))
      let endTime = new Date(this.meetingInfo.meetingStopTime.replace(/-/g, '/'))
      // 会议时间是否跨天
      this.isSameDay = startTime.setHours(0, 0, 0, 0) === endTime.setHours(0, 0, 0, 0)
    },
    // 会议议程显示，根据设置的时间类型显示
    handleAgendaTime (agendaInfo) {
      let timeArr = this.formatDate(agendaInfo.agendaStartTime, agendaInfo.agendaStopTime)
      let startTime = ''
      let endTime = ''
      if (timeArr.length > 1) {
        startTime = timeArr[0]
        endTime = timeArr[1]
        switch (Number(agendaInfo.showTimeStyle)) {
          case 1:
            return `${startTime} ~ ${endTime}`
          case 2:
            return `${startTime.slice(5)} ~ ${endTime.slice(5)}`
          case 3:
            return `${startTime.slice(11)} ~ ${endTime.slice(11)}`
        }
      } else {
        startTime = timeArr[0]
        switch (Number(agendaInfo.showTimeStyle)) {
          case 1:
            return `${startTime}`
          case 2:
            return `${startTime.slice(5)}`
          case 3:
            return `${startTime.slice(11)}`
        }
      }
    }
  },
  created () {
    this.fetchMeetingInfo()
    this.fetchMeetingSettingInfo()
    setTimeout(() => {
      this.showPage = true
    }, 300)
  }
}
</script>

<style lang="stylus" scoped>
.meeting-home-wrapper
  // min-height 100vh
  width 100%
  height 100vh
  background #F2F4F5
  display flex
  flex-direction column
  position relative
  .cont
    width 100%
    scroll()
    height 100%
    &.hasFooter
      height calc(100% - 50px)
    .meeting-cover
      width 100%
      height 42.5vw
      margin-bottom -14px
      bgCover()
    .meeting-info
      background: #F2F4F5;
      border-radius: 20px 20px 0px 0px;
      padded_box(border-box, 12px 12px 0)
      .body-part
        padded_box(border-box, 12px)
        background: #FFFFFF;
        border-radius: 12px;
        margin-bottom 12px
        .basic-title
          height 22px
          line-height 22px
          display flex
          align-items center
          margin-bottom 12px
          .title-box
            flex 1
            width 0
            font-size: 16px;
            font-weight: 700;
            color: #333333;
            noWrap()
            margin-right 26px
          .title-signUp
            flex none
            font-size: 12px;
            font-weight: 400;
            color: #999999;
        .basic-list
          .basic-item
            display flex
            margin-top 6px
            .item-icon
              flex none
              width 20px
              height 20px
              background-repeat no-repeat
              background-position center
              background-size 16px
              margin-right 4px
              &.speaker
                background-image url('~assets/img/ic_zjr@2x.png')
              &.time
                background-image url('~assets/img/ic_time@2x.png')
              &.address
                background-image url('~assets/img/ic_address@2x.png')
            .item-text
              font-size: 14px;
              font-weight: 400;
              color: #333333;
              line-height: 20px;
            .period
              width 100%
              position relative
              &::before
                content ''
                display block
                width 1px
                height 43px
                background #eee
                position absolute
                left 3px
                top 50%
                transform translate(0, -50%)
              .text
                line-height: 20px;
                font-size: 14px;
                color: #333333;
                padded_box(border-box, 0 0 0 12px)
                position relative
                & + .text
                  margin-top 6px
                &::before
                  content ''
                  display block
                  width 7px
                  height 7px
                  background url('~assets/img/icon_round@3x.png') no-repeat center/100%
                  position absolute
                  top 50%
                  left 0
                  transform translate(0,-50%)
        .part-title
          display flex
          justify-content space-between
          align-items center
          .title-content
            font-size: 16px;
            font-weight: 700;
            color: #333333;
          .title-arrow
            width 16px
            height 16px
            background url('~assets/img/ic_jt@2x.png') no-repeat center / 10px
            &.collapse
              transform rotate(180deg)
        .guest-list
          margin-top 4px
          .guest-item
            padded_box(border-box, 12px 0)
            border-bottom 1px solid #EEEEEE
            &:last-child
              border-bottom none
            .guest-detail
              display flex
              align-items center
              .detail-avatar
                flex none
                width: 40px;
                height: 40px;
                border-radius: 8px;
                margin-right 10px
                bgCover()
              .detail-info
                .info-name
                  font-size: 14px;
                  font-weight: 700;
                  color: #333333;
                  line-height: 20px;
                .info-title
                  font-size: 12px;
                  font-weight: 400;
                  color: #666666;
                  line-height: 17px;
            .guest-desc
              margin-top 4px
              font-size: 12px;
              font-weight: 400;
              color: #999999;
              line-height: 17px;
        .process-list
          border-left 1px solid #eee
          padding-left 12px
          margin-top 12px
          .process-item
            margin-top 12px
            position relative
            &:first-child
              margin 0
            .item-icon
              position absolute
              left -18px
              top 4px
              width 11px
              height 11px
              background url('~assets/img/ic_yyyc@2x.png') no-repeat 0 0 / 100%
            .info-item
              margin-top 12px
              &:first-of-type
                margin 0
              .item-title
                font-size: 14px;
                font-weight: 700;
                color: #333333;
                line-height: 20px;
                margin-bottom 4px
              .item-content
                font-size: 12px;
                font-weight: 400;
                color: #666666;
                line-height: 18px;
  .float-btn
    width 56px
    position absolute
    bottom 90px
    right 8px
    .btn-info
      width 75px
      height 75px
      background #fff
      border-radius 50%
      box-shadow: 0px 5px 10px 0px rgba(48, 50, 51, 0.2)
      padded_box(border-box, 12px)
      display flex
      flex-direction column
      justify-content center
      align-items center
      transform scale(0.75)
      margin-left -9px
      position relative
      .num
        min-width 20px
        height 20px
        background #E55907
        line-height 20px
        text-align center
        font-size 12px
        color #fff
        padded_box(border-box, 0 6px)
        border-radius 10px
        position absolute
        right 0
        top 0
      .btn-icon
        width 32px
        height 32px
        background-repeat no-repeat
        background-position center
        background-size 100%
        &.center
          background-image url('~assets/img/ic_center@3x.png')
          background-size 53px
          background-position center top
        &.survey
          background-image url('~assets/img/ic_dy@2x.png')
        &.qa
          background-image url('~assets/img/ic_tiwen@2x.png')
      .btn-label
        line-height 16px
        font-size 12px
        color #666666
        margin-top 3px
  .home-footer
    position fixed
    left 0
    right 0
    bottom 0
    z-index 10
    background #fff
    height 50px
    padded_box(border-box, 0 12px)
    box-shadow: 0px -1px 10px 0px rgba(78, 76, 86, 0.1);
    display flex
    align-items center
    .toolbar-list
      display flex
      align-items center
      padded_box(border-box, 6px 0)
      &.all
        flex 1
        .toolbar-item
          flex 1
      .toolbar-item
        width 54px
        &.active
          .icon
            &.icon-like
              background-image url('~assets/img/icon_like_s@3x.png')
            &.icon-collect
              background-image url('~assets/img/icon_collect_s@3x.png')
            &.icon-comment
              background-image url('~assets/img/icon_comment_s@3x.png')
        .icon
          width 100%
          height 16px
          background-repeat no-repeat
          background-position center
          background-size 16px
          &.icon-like
            background-image url('~assets/img/icon_like_n@3x.png')
          &.icon-collect
            background-image url('~assets/img/icon_collect_n@3x.png')
          &.icon-comment
            background-image url('~assets/img/icon_comment_n@3x.png')
        .text
          width 100%
          height 18px
          line-height 18px
          text-align center
          font-size 12px
          color #666666
          margin-top 4px
    .footer-btn
      flex 1
      height 38px
      line-height 38px
      background: #CDCDCD;
      border-radius: 19px;
      font-size: 14px;
      font-weight: 500;
      color: #FFFFFF;
      text-align center
      &.active
        background: #0083FF;
      &.ml12
        margin-left: 12px
  .signUp-wrapper
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    z-index 100
    background: rgba(0, 0, 0, 0.6)
    .siguUp-box
      position absolute
      left 50%
      top 50%
      transform translate(-50%, -50%)
      width calc(100vw - 48px)
      max-height 400px
      background: #F7F7F9;
      box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      .box-header
        position relative
        padded_box(border-box, 16px 16px 9px)
        text-align center
        font-size: 16px;
        font-weight: 700;
        color: #333333;
        line-height: 22px;
        .box-close
          position absolute
          right 14px
          top 0
          bottom 0
          margin auto
          width 22px
          height 22px
          background url('~assets/img/ic_close@2x.png') no-repeat center / 20px
          cursor pointer
      .box-content
        padded_box(border-box, 0 16px)
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        margin-bottom 9px
        max-height 240px
        overflow scroll
      .box-footer
        background: #FFFFFF;
        border-radius: 0px 0px 4px 4px;
        padded_box(border-box,16px)
        .footer-toggle
          display flex
          align-items center
          .toggle-icon
            width 16px
            height 16px
            margin-right 8px
            background url('~assets/img/ic_wxz@2x.png') no-repeat 0 0 / 100%
            &.agreed
              background-image url('~assets/img/ic_xz@2x.png')
          .toggle-text
            font-size: 12px;
            font-weight: 400;
            color: #333333;
        .footer-btn
          height: 38px;
          line-height 38px
          background: #0083FF;
          border-radius: 19px;
          font-size: 14px;
          font-weight: 700;
          color: #FFFFFF;
          text-align center
          margin-top 16px
</style>
